import { useState } from 'react'
import { Card, Form, Input, Switch, Button, message, Divider, InputNumber } from 'antd'
import { SaveOutlined } from '@ant-design/icons'
import './index.scss'

const { TextArea } = Input

const SystemConfig = () => {
  const [loading, setLoading] = useState(false)
  const [form] = Form.useForm()

  // 模拟系统配置数据
  const [config] = useState({
    siteName: '阅读管理系统',
    siteDescription: '专业的图书阅读管理平台',
    siteKeywords: '阅读,图书,管理',
    adminEmail: 'admin@example.com',
    maxUploadSize: 10,
    enableRegister: true,
    enableComment: true,
    enableReview: true,
    maintenanceMode: false,
    sessionTimeout: 30,
  })

  // 保存配置
  const handleSave = async (values) => {
    setLoading(true)
    try {
      await new Promise(resolve => setTimeout(resolve, 1000))
      message.success('系统配置保存成功')
    } catch (error) {
      message.error('保存失败')
    } finally {
      setLoading(false)
    }
  }

  return (
    <div className="system-config-container">
      <Card title="系统配置" className="config-card">
        <Form
          form={form}
          layout="vertical"
          initialValues={config}
          onFinish={handleSave}
        >
          <div className="config-grid">
            <div className="config-column">
              <Divider orientation="left">基本设置</Divider>
              
              <Form.Item
                label="网站名称"
                name="siteName"
                rules={[{ required: true, message: '请输入网站名称' }]}
              >
                <Input placeholder="请输入网站名称" />
              </Form.Item>

              <Form.Item
                label="网站描述"
                name="siteDescription"
              >
                <TextArea rows={3} placeholder="请输入网站描述" />
              </Form.Item>

              <Form.Item
                label="网站关键词"
                name="siteKeywords"
              >
                <Input placeholder="多个关键词用逗号分隔" />
              </Form.Item>

              <Form.Item
                label="管理员邮箱"
                name="adminEmail"
                rules={[
                  { required: true, message: '请输入管理员邮箱' },
                  { type: 'email', message: '请输入有效的邮箱地址' }
                ]}
              >
                <Input placeholder="请输入管理员邮箱" />
              </Form.Item>

              <Divider orientation="left">上传设置</Divider>

              <Form.Item
                label="最大上传大小（MB）"
                name="maxUploadSize"
                rules={[{ required: true, message: '请输入最大上传大小' }]}
              >
                <InputNumber min={1} max={100} style={{ width: '100%' }} />
              </Form.Item>

              <Form.Item
                label="会话超时时间（分钟）"
                name="sessionTimeout"
                rules={[{ required: true, message: '请输入会话超时时间' }]}
              >
                <InputNumber min={5} max={120} style={{ width: '100%' }} />
              </Form.Item>
            </div>

            <div className="config-column">
              <Divider orientation="left">功能开关</Divider>

              <Form.Item
                label="开放用户注册"
                name="enableRegister"
                valuePropName="checked"
              >
                <Switch />
              </Form.Item>

              <Form.Item
                label="开启评论功能"
                name="enableComment"
                valuePropName="checked"
              >
                <Switch />
              </Form.Item>

              <Form.Item
                label="开启书评功能"
                name="enableReview"
                valuePropName="checked"
              >
                <Switch />
              </Form.Item>

              <Form.Item
                label="维护模式"
                name="maintenanceMode"
                valuePropName="checked"
                extra="开启后，普通用户将无法访问系统"
              >
                <Switch />
              </Form.Item>

              <Divider orientation="left">系统信息</Divider>

              <div className="system-info">
                <div className="info-item">
                  <span className="label">系统版本：</span>
                  <span className="value">v1.0.0</span>
                </div>
                <div className="info-item">
                  <span className="label">运行环境：</span>
                  <span className="value">Production</span>
                </div>
                <div className="info-item">
                  <span className="label">数据库：</span>
                  <span className="value">MySQL 8.0</span>
                </div>
                <div className="info-item">
                  <span className="label">服务器：</span>
                  <span className="value">Nginx 1.20</span>
                </div>
              </div>
            </div>
          </div>

          <Form.Item className="submit-btn">
            <Button type="primary" htmlType="submit" loading={loading} icon={<SaveOutlined />}>
              保存配置
            </Button>
          </Form.Item>
        </Form>
      </Card>
    </div>
  )
}

export default SystemConfig
